<script setup lang="ts">
  import { computed, PropType, ref } from 'vue'
  import {
    DataConnectConfig,
    DataConnectTableFieldType,
    DataConnectTableType,
  } from '@/views/order/custom/hooks/types'
  import CustomSingleSelect from '@/views/order/custom/form/component-list/CustomSingleSelect.vue'
  import CustomMultipleSelect from '@/views/order/custom/form/component-list/CustomMultipleSelect.vue'
  import fieldFillSetModal from './field-fill-set-modal.vue'
  import { useTemplateForm } from '@/views/order/custom/hooks/useTemplate'
  import { FieldRow, FieldOptions } from './types'

  const { inputComponentList, getChildFormInputComponentList } = useTemplateForm()

  defineOptions({
    name: 'OrderCustomFormDataConnectSetting',
  })

  const props = defineProps({
    parentComponentType: {
      type: String as PropType<'form' | 'child-form'>,
      default: () => 'form',
    },
    childFormId: {
      type: String,
      default: () => '',
    },
  })

  const emits = defineEmits<{
    (e: 'change'): void
    (e: 'field-fill-rule-change', value: DataConnectConfig['fillRules']): void
  }>()

  /**
   * 单行输入组件列表
   * 用于给设置填充规则弹窗传参
   */
  const _inputComponentList = computed(() => {
    if (props.parentComponentType === 'form') {
      return inputComponentList.value
    }

    const childFormComponentList = getChildFormInputComponentList(props.childFormId)
    if (childFormComponentList) {
      return childFormComponentList
    }

    return []
  })

  // 字段设置弹窗显示状态
  const fieldFillSetModalVisible = ref(false)

  // 绑定的值
  const value = defineModel<DataConnectConfig>('modelValue', { required: true })

  // 关联数据主表类型下拉选项
  const dataConnectTypeOptions: Array<{ label: string; value: DataConnectTableType }> = [
    { label: '商品', value: 'good' },
    { label: '条码', value: 'snCode' },
    { label: '客户', value: 'customer' },
  ]

  // 公司字段下拉选项
  const customerFieldOptions: FieldOptions = [
    { label: '公司名称', value: 'customerName' },
    { label: '公司编号', value: 'customerCode' },
    { label: '公司手机号', value: 'customerPhone' },
    { label: '公司创建时间', value: 'customerCreateTime' },
    { label: '公司更新时间', value: 'customerUpdateTime' },
  ]

  // 产品字段下拉选项
  const goodFieldOptions: FieldOptions = [
    { label: '产品名称', value: 'goodName' },
    { label: '产品编号', value: 'goodCode' },
    { label: '产品规格', value: 'goodSpec' },
    { label: '产品单位', value: 'goodUnit' },
    { label: '产品分类', value: 'goodClassify' },
    { label: '产品创建时间', value: 'goodCreateTime' },
    { label: '产品更新时间', value: 'goodUpdateTime' },
  ]

  // 条码字段下拉选项
  const snCodeFieldOptions: FieldOptions = [
    { label: '条码', value: 'snCode' },
    { label: '产品编号', value: 'goodCode' },
    { label: '产品名称', value: 'goodName' },
    { label: '产品规格', value: 'goodSpec' },
    { label: '产品分类', value: 'goodClassify' },
    { label: '公司名称', value: 'customerName' },
    { label: '公司手机号', value: 'customerPhone' },
    { label: '条码来源', value: 'snCodeSource' },
    { label: '条码创建时间', value: 'snCodeCreateTime' },
    { label: '条码更新时间', value: 'snCodeUpdateTime' },
    { label: '条码质保开始', value: 'snCodeWarrantyStartTime' },
    { label: '条码质保结束', value: 'snCodeWarrantyEndTime' },
  ]

  // 关联数据字段集合
  const fieldRow: FieldRow = {
    good: goodFieldOptions,
    customer: customerFieldOptions,
    snCode: snCodeFieldOptions,
  }

  // 关联数据字段选择下拉选项
  const dataConnectFieldSelectOptions = computed(() => {
    if (value.value.type === '') {
      return []
    }

    return fieldRow[value.value.type]
  })

  /**
   * 关联数据主表选择事件
   * 清空之前选择的字段
   */
  const handleDataConnectMainTableSelect = () => {
    value.value.fieldList.length = 0
    value.value.showFormFieldList.length = 0
    emits('change')
  }

  /**
   * 数据选择后显示在表单的字段选择事件
   * @param {Array<string>} selectList - 选择的列表
   */
  const handleFieldShowAfterSelectData = (selectList: Array<string>) => {
    value.value.showFormFieldList = selectList.map((field) => {
      const result: { label: string; value: DataConnectTableFieldType } = {
        label: '',
        value: '',
      }

      const item = dataConnectFieldSelectOptions.value.find((item) => item.value === field)
      if (item) {
        result.label = item.label
        result.value = item.value
      }

      return result
    })
    emits('change')
  }

  /**
   * 字段填充设置弹窗更新事件
   * @param {DataConnectConfig['fillRules']} rules - 填充规则列表
   */
  const handleFieldFillSetModalUpdate = (rules: DataConnectConfig['fillRules']) => {
    emits('field-fill-rule-change', rules)
  }
</script>

<template>
  <div class="order-custom-form-data-connect-setting">
    <div class="setting-item data-connect type">
      <div class="label">数据源</div>
      <div class="value">
        <custom-single-select
          v-model="value.type"
          :options="dataConnectTypeOptions"
          placeholder="请选择主表"
          @change="handleDataConnectMainTableSelect"
        />
      </div>
    </div>
    <div class="setting-item data-connect customer-field">
      <div class="label">数据选择时显示的字段</div>
      <div class="value">
        <custom-multiple-select
          v-model="value.fieldList"
          :options="dataConnectFieldSelectOptions"
          placeholder="请选择字段"
          @change="emits('change')"
        />
      </div>
    </div>

    <div class="setting-item data-connect show-form-field-list">
      <div class="label">数据选择后显示在表单的字段</div>
      <div class="value">
        <custom-multiple-select
          :model-value="value.showFormFieldList.map((item) => item.value)"
          :options="dataConnectFieldSelectOptions"
          @update:model-value="handleFieldShowAfterSelectData"
        />
      </div>
    </div>

    <h-button :width="400" type="primary" @click="fieldFillSetModalVisible = true">
      {{ value.fillRules.length > 0 ? '修改填充规则' : '设置填充规则' }}</h-button
    >

    <field-fill-set-modal
      v-model="fieldFillSetModalVisible"
      :input-component-list="_inputComponentList"
      :source-field-list="dataConnectFieldSelectOptions"
      :default-rules="value.fillRules"
      @update="handleFieldFillSetModalUpdate"
    />
  </div>
</template>

<style scoped lang="scss">
  .order-custom-form-data-connect-setting {
    display: flex;
    flex-direction: column;
    row-gap: 16px;

    .setting-item {
      display: flex;
      flex-direction: column;
      row-gap: 4px;
    }
  }
</style>
